<template>
  <n-button style="margin-bottom: 10px" @click="add" type="primary">新增</n-button>
  <div>
    <n-data-table
      :loading="tableLoading"
      :columns="columns"
      :data="data"
      :pagination="pagination"
      :single-line="false" />
    <n-modal
      :style="{ width: '500px' }"
      v-model:show="showModal"
      class="custom-card"
      preset="card"
      title="修改信息"
      size="huge"
      :bordered="false"
      :segmented="false"
      :on-after-leave="onAfterLeave">
      <template #header-extra> </template>
      <n-flex>
        <n-form :model="form" label-placement="left" label-width="auto" :style="{ width: '100%' }">
          <n-form-item label="摄像头名称:">
            <n-input v-model:value="form.label" placeholder="请输入摄像头名称" />
          </n-form-item>
          <n-form-item label="摄像头地址:">
            <n-input v-model:value="form.url" placeholder="请输入摄像头地址" />
          </n-form-item>
          <!-- 
          <n-form-item label="座位数:">
            <n-input
              v-model:value="form.seatCount"
              placeholder="请输入座位数"
            />
          </n-form-item>
          <n-form-item label="维修记录:">
            <n-input
              v-model:value="form.maintenanceRecord"
              placeholder="请输入维修记录"
            />
          </n-form-item>
          <n-form-item label="调度:">
            <n-select v-model:value="form.dispatchStatus" :options="options" />
          </n-form-item> -->
        </n-form>
      </n-flex>
      <template #footer>
        <n-flex justify="end">
          <n-button @click="showModal = false">取消</n-button>
          <n-button :loading="submitLoading" type="primary" @click="Summit()">确定</n-button>
        </n-flex>
      </template>
    </n-modal>
  </div>
</template>
<script setup>
import { updateM3u8, getM3u8, addM3u8, delM3u8 } from "@/api";
import { NButton, NPopconfirm } from "naive-ui";
import Store from "@/stores";
const store = Store();
const tableLoading = ref(false);
const showModal = ref(false);
const submitLoading = ref(false);
const data = ref([]);
const form = ref({});
const type = ref("");
const options = ref([
  {
    label: "休息",
    value: "休息",
  },
  {
    label: "工作",
    value: "工作",
  },
  {
    label: "调度",
    value: "调度",
  },
]);
const columns = [
  {
    title: "摄像头名称",
    key: "label",
  },
  {
    title: "地址",
    key: "url",
  },
  //   {
  //     title: "车厢数量",
  //     key: "numberOfCarriages",
  //     render: (item) => {
  //       return h("span", item.numberOfCarriages + "节");
  //     },
  //   },
  //   {
  //     title: "座位数",
  //     key: "seatCount",
  //     render: (item) => {
  //       return h("span", item.seatCount + "个");
  //     },
  //   },
  //   {
  //     title: "维修记录",
  //     key: "maintenanceRecord",
  //   },
  //   {
  //     title: "调度状态",
  //     key: "dispatchStatus",
  //     render: (item) => {
  //       return h(
  //         "span",
  //         {
  //           style: {
  //             color:
  //               item.dispatchStatus == "休息"
  //                 ? "#ccc"
  //                 : item.dispatchStatus == "工作"
  //                 ? "green"
  //                 : "red",
  //           },
  //         },
  //         item.dispatchStatus
  //       );
  //     },
  //   },
  //   {
  //     title: "运营时间",
  //     key: "operationalTimeframe",
  //   },
  //   {
  //     title: "行驶里程",
  //     key: "mileage",
  //     render: (item) => {
  //       return h("span", item.mileage / 10000 + "公里");
  //     },
  //   },
  //   {
  //     title: "当前时速",
  //     key: "currentSpeed",
  //     render: (item) => {
  //       return h("span", item.currentSpeed + "km/h");
  //     },
  //   },
  //   {
  //     title: "运营状态",
  //     key: "operatingStatus",
  //   },
  {
    title: "操作",
    align: "center",
    key: "jurisdiction",

    render(item) {
      return [
        h(
          NButton,
          {
            type: "info",
            quaternary: true,
            size: "small",

            onClick: () => {
              if (store.userInfo.userName != "超级管理员") {
                return $message.error("当前账户无操作权限");
              }

              form.value = JSON.parse(JSON.stringify(Object.assign(item, { _id: item._id })));
              showModal.value = true;
            },
          },
          { default: () => "修改" }
        ),
        h(
          NPopconfirm,
          {
            onPositiveClick: () => {
              console.log(item);
              delM3u8({ _id: item._id }).then(res => {
                if (res.code != 200) return $message.error(res.message);
                $message.success(res.message);
                getList();
              });
            },
          },
          {
            trigger: () =>
              h(
                NButton,
                {
                  disabled: item.jobNumber == "000" || store.userInfo.jobNumber == item.jobNumber,
                  type: "error",
                  quaternary: true,
                  size: "small",
                },
                { default: () => "删除" }
              ),
            default: () => "确认删除",
          }
        ),
      ];
    },
  },
];
const pagination = {
  showSizePicker: true,
  pageSizes: [10, 30, 50, 100], //可切换的 每页条数
};
getList();
function getList(params) {
  tableLoading.value = true;
  getM3u8().then(res => {
    tableLoading.value = false;
    if (res.code != 200) return $message.error(res.message);
    data.value = res.data;
  });
}
// 更新
function Summit() {
  if (!form.value.label) return $message.warning("请输入摄像头名称");
  if (!form.value.url) return $message.warning("请输入地址");
  if (type.value == "add") {
    const vehicleData = JSON.parse(JSON.stringify(form.value));
    addM3u8(vehicleData).then(res => {
      if (res.code != 200) return $message.error(res.message);
      $message.success("新增成功");
      showModal.value = false;
      type.value = "";
      getList();
    });
    return;
  }
  const vehicleData = JSON.parse(JSON.stringify(form.value));
  updateM3u8(vehicleData).then(res => {
    if (res.code != 200) return $message.error(res.message);
    $message.success("更新成功");
    showModal.value = false;
    getList();
  });
}
const add = () => {
  showModal.value = true;
  type.value = "add";
};
const onAfterLeave = () => {
  type.value = "add";
  form.value = {};
};
</script>

<style lang="scss" scoped></style>
